<%--
  Created by IntelliJ IDEA.
  User: 29649
  Date: 2021/10/25
  Time: 19:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>人脸登陆</title>
    <link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">
    <script type="text/javascript" src="../../boot/plugin/layui/layui.js"></script>
    <script type="text/javascript" src="http://47.100.102.177:8080/app/plugin/jquery.min.js"></script>
</head>
<style type="text/css">
    /**解决浏览器兼容性问题**/
    *{margin: 0;padding: 0;}
    html,body{width: 100%;height: 100%;}/**/
    body{
        background-image: url("http://47.100.102.177:8080/app/images/login/街的对面%20海边可爱女生插画4k壁纸_彼岸图网.jpg");
        background-size: cover;
    }
    h1{color: #fff;text-align: center;line-height: 80px;}
    .media{width: 534px;height: 400px;margin: 40px auto 0;
    }
    #canvas{display: none;}
    #name{
        position: relative;
        left: 520px;
        font-size: 15px;
    }
    #username{
        width: 200px;
        position: relative;
        left: 500px;
    }
    #login{
        position: relative;
        left: 810px;
        top: -38px;
    }
    #video{
        position: relative;
        width:500px;
        height:400px;
        top: -50px;
        left: 20px;
    }
</style>

<body>
<h1>人脸登陆</h1>
<div class="media">
    <video id="video" autoplay></video>
    <canvas id="canvas" width="450" height="300"></canvas>
</div>
<label class="layui-form-label" id="name">手机号：</label>
<input type="text" id="username" class="layui-input" placeholder="手机号" >
<button id="login" class="layui-btn layui-btn-normal" >登陆</button>
<script>
    /**调用摄像头，获取媒体视频流**/
    var video = document.getElementById('video');
    //返回画布二维画图环境
    var userContext = canvas.getContext("2d");
    var getUserMedia =
        //浏览器兼容,表示在火狐、Google、IE等浏览器都可正常支持
        (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
    //getUserMedia.call(要调用的对象，约束条件，调用成功的函数，调用失败的函数)
    getUserMedia.call(navigator,{video: true,audio: false},function(localMediaStream){
        //获取摄像头捕捉的视频流
        video.srcObject=localMediaStream;
    },function(e){
        console.log("获取摄像头失败！！")
    });
    //点击按钮事件
    var btn = document.getElementById("login");

    btn.onclick = function () {
        layer.load(0);
        var username = $("#username").val();
        if(username != null){
            //点击按钮时拿到登陆者面部信息
            userContext.drawImage(video,0,0,450,300);
            var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
            //拿到bash64格式的照片信息
            var faceBase = userImgSrc.split(",")[1];

            //ajax异步请求
            $.ajax({
                url: "falogin",
                type: "post",
                data: {"faceBase": faceBase,
                        "uname":username
                },
                success: function(result){
                    if(result=='1'){
                        layer.msg("登录成功！！")

                        //跳转至登录页面
                        window.location.href = '/boot/index01';
                    }else{
                        alert("人脸识别失败！！");
                    }
                }
            })
            }
    }
</script>
</body>
</html>
